<template>
  <div class="wraps">
    <!-- 左1 专利授权数据统计 -->
    <div class="left1">
      <el-card class="box-card" shadow="hover" style="height: 100%">

        <div style="font-size: 16px">
          <ZlsqSjtj></ZlsqSjtj>
        </div>
      </el-card>
    </div>

    <!-- 左2 标准数据统计 -->
    <div class="left2">
      <el-card class="box-card" shadow="hover" style="height: 100%">
        <div style="font-size: 16px">
          <BzsjTj></BzsjTj>
        </div>
      </el-card>
    </div>


    <!-- 左3 工法数据统计 -->
    <div class="left3">
      <el-card class="box-card" shadow="hover" style="height: 100%">
        <div style="font-size: 16px">
          <GfsjTj></GfsjTj>
        </div>
      </el-card>
    </div>


    <!-- 左4 科技进步奖数据统计 -->
    <div class="left4">
      <el-card class="box-card" shadow="hover" style="height: 100%">
        <KjjbjSjtj/>
      </el-card>
    </div>
  </div>
</template>

<script>
import ZlsqSjtj from "@/views/sjfx/sjfxkb/ZlsqSjtj";
import GfsjTj from "@/views/sjfx/sjfxkb/GfsjTj";
import BzsjTj from "@/views/sjfx/sjfxkb/BzsjTj";
import KjjbjSjtj from "@/views/sjfx/sjfxkb/KjjbjSjtj";
export default {
  name: 'Zscqkb',
  components: {ZlsqSjtj, GfsjTj, BzsjTj, KjjbjSjtj},
  data() {
    return {
    }
  },
  computed: {
    loadData() {
      // 根据selectedYear加载对应的数据
      // 这里可以是AJAX请求或其他异步操作
      console.log('Loading data for year:', this.selectedYear);
    },
  },
  created() {
  }
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左1 */
.left1 {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  /*bottom: 51%; !* 距离下面 60% *!*/
  left: 0%; /* 距离左侧1% */
  width: 25%;
  height: 97%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 左2 */
.left2 {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  /*bottom: 51%; !* 距离下面 60% *!*/
  left: 25%; /* 距离左侧1% */
  width: 25%;
  height: 97%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 左3 */
.left3 {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  /*bottom: 51%; !* 距离下面 60% *!*/
  left: 50%; /* 距离左侧1% */
  width: 25%;
  height: 97%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 左4 */
.left4 {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  /*bottom: 51%; !* 距离下面 60% *!*/
  left: 75%; /* 距离左侧1% */
  width: 25%;
  height: 97%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}
/*!* 每个左侧栏 *!*/
/*.left1, .left2, .left3, .left4 {*/
/*  flex: 1;*/
/*  margin: 1%; !* 调整间距 *!*/
/*  width: 22%; !* 设置宽度，考虑到边距 *!*/
/*  !*border: 1px solid #D9EDF7;*!*/
/*}*/


/deep/ .el-card__body {
  padding: 2px 20px 20px 20px;
  height: calc(100% - 30px); /* 减去头部高度 */
}
</style>
